$uiname: "aoyou-textbox";
$ui-state-disabled-background-color:red;
$ui-state-disabled-border-color:blue;
.#{$uiname}{
    vertical-align: middle;
    display: inline-block;
    position: relative;
}
.#{$uiname}{
    .#{$uiname}-fronttitle{
        float: left;
        line-height: 28px;
        margin-right: 5px;
    }
    .#{$uiname}-lastalert{
        float: right;
        line-height: 28px;
        margin-left: 8px;
        color:#C00;
    }
}
.#{$uiname}-main {
    display: inline-block;
    position: relative;
    line-height: 18px;
    overflow: hidden;
    outline: medium none;


    .#{$uiname}-input {
        position: relative;
        float: left;
        display: inline;
        margin: 0;
        padding: 3px 5px;
        height: 18px;
        line-height: 18px;
        font-size: 12px;
        vertical-align: middle;
        outline: medium none;
        border:1px solid #d3d3d3;
        &.aoyou-state-disabled {
            color: #999;
            background-color: whitesmoke;
            border-color: #d9d9d9;
            cursor: default;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }
        &:focus{
            border:1px solid #288d41;
        }
    }

    .#{$uiname}-iconbox{
        position: absolute;
        top:4px;
        right: 5px;
        line-height: 18px;
        height: 18px;
        z-index: 1;
        .#{$uiname}-icon-calendar{
            width: 13px;
            height: 14px;
            display: block;
            background: url('../useimg/icon-calendar.png') no-repeat;
        }
    }

    textarea.#{$uiname}-input {
        height: 60px;
        resize: none;
    }

    .#{$uiname}-placeholder {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        padding: 3px 5px;
        font-size: 14px;
        z-index: 1;
        overflow: hidden;
        word-wrap: break-word; 
        word-break: break-all;
        cursor: text;
    }
    .#{$uiname}-suggest {
        position: relative;
        z-index: 1000;
    }
    &.#{$uiname}-disabled {
        background-color: $ui-state-disabled-background-color;
        border-color: $ui-state-disabled-border-color;
        cursor: default;
        .#{$uiname}-input {
            cursor: default;
            background-color: $ui-state-disabled-background-color;
        }
    }
}
.#{$uiname}-error {
    border-color: #ff8888;
}
